$ = $j;
;(function($) {  

	  $.fn.processbar = function(data,options) {  
	   
	    var colorhelper = new  $.fn.processbar.colorHelper();
	    var max_ = data.max;
	    var $container = $(this);
	    var opts = $.extend({}, $.fn.processbar.defaults, options);  
	    $.fn.processbar.initialize($container,opts);
		var width__ = $container.width();


	 //   $.fn.processbar.initialize($container,data);
		
		var sections = buildBar();
		var totalwidth = 0;
		for(var section=0;section<sections.length;section++){	
			sections[section].process();
			var w =sections[section].sectionBody_.width();
			totalwidth = totalwidth+w;
		}

	    return this.each(function() {  

	    });  

	    

	    function buildBar(){
	      
		    var sections_ = new Array();    
	        for(var item=0;item<data.sections.length;item++){
	        	
				sections_.push( new section(data.sections[item].value,data.sections[item].text,data.sections[item].label));		   
			}
			var sum_ = new countValue(sections_);
			//FIX
		    sections_.push(new section(max_-sum_.sumValue,"剩余未分配","未分配",(width__-sum_.sumWidth)));	        
			margeLabel(sections_);
			return sections_;
	    }

		function margeLabel(sections_){
		   
		   var sec_ = getHasNext(sections_);
		   while(sec_>0){

				sections_[sec_+1].sectionLabel_.parent().remove();
				sections_[sec_+1].sectionLabel_ = sections_[sec_].sectionLabel_;
				var sectionContainer = sections_[sec_].sectionLabel_.parent();		
				var t = (1+Number(sectionContainer.attr("colspan")));
				sectionContainer.attr("colspan",t);
				sec_ = getHasNext(sections_);
		   }
		   
		   function getHasNext(sections_){

			  for (var index=0;index<sections_.length;index++){
					index = parseInt(index);
					if(index+1<sections_.length){
						if(
						!(sections_[index].sectionLabel_ === sections_[index+1].sectionLabel_) &&
							sections_[index].sectionLabel_.text()==sections_[index+1].sectionLabel_.text()){
						    return index;
							}
					}
					
			   }
			 return -1;
		   };
		}


		function countValue(sections){
			 this.sumValue = 0;
			 this.sumWidth = 0;
			 for(var item=0;item<sections.length;item++){
					this.sumValue += sections[item].value;
					this.sumWidth += sections[item].width;
			 }
			
		}


		
		  function section(value_,text_,label_,width_){
		 	this.value = value_;
		    this.width=0;
			this.sectionBody_ = buildSectionBody();
			this.sectionLabel_  = buildSectionLabel();
			this.shadow = buildShadow(this);
			// FIX
			this.rangePercent = (value_/max_*100).toFixed(2);
			
			if(!width_){
				var realWidth = Math.floor(value_/max_*width__);
				this.width = (realWidth>=opts.section_minWidth)?realWidth:opts.section_minWidth;
			}else{
				this.width=width_;
			}
			var actionCss = {width:(this.width)+"px"};

			this.process = function(){	
			
				this.doProcess(this.sectionBody_,this.setText());
			
			};
			this.setText = function(){
	        			
				this.sectionBody_.attr("title",text_+" "+this.rangePercent+"%");
				this.sectionLabel_.text(label_);	
				this.sectionLabel_.show();
			};
			this.doProcess = function(k,callback){



						if(opts.animate){
								k.animate(actionCss,callback);
						}else{
								k.css(actionCss);
								if(callback)callback.call(this);
						}
			};

			this.sectionBody_.hover(
				  function () {
					$container.find(".section").each(
						function (){
								$(this).css("z-index","8");
						}
					);
					var shadow_ = $(this).siblings(".shadow");
					var position = $(this).position();
					shadow_.css("z-index","9").css("margin","5px 0 0 5px").css("width",$(this).width()).css({"left":position.left,"top": position.top}).show();
					
					$(this).css("z-index","10");
					$(this).width($(this).width()-2);
					$(this).height($(this).height()-2);
					
					$(this).css("border","1px solid black");
					
				  },
				  function () {
					//$(this).css("border","1px solid "+  $(this).data("color"));
				    $(this).siblings(".shadow").hide();
					$(this).width($(this).width()+2);
					$(this).height($(this).height()+2);
					$(this).css("border","0px solid");
				  }
				);
						this.setText();
		}
			 
			 
			 
			 function buildShadow(obj){
				 var shadow_ = $("<div class='shadow'/>");
				 obj.sectionBody_.parent().append(shadow_);
			 }

		
		function buildSectionLabel(){

	     var label_ =  $("<span style='display:inline'/>")
		 $container.find("table .label").append($("<td colspan='1'/>").append(label_)); 	
		 return label_;

		}
			
		

		
		function buildSectionBody(){
				var bg =  colorhelper.get();
				var sectionBody = $('<div class="section" />').css("background",bg.picurl);
				$container.find("table .body").append($("<td/>").append(sectionBody)); 	
				sectionBody.data("color",bg.color);
			    return sectionBody;
		
		}
	};


	  
	  $.fn.processbar.initialize  = function($container,opts) {  
	    $container.css("width",$container.parent().width()-(opts.container_margin*2));
	  };  


	  $.fn.processbar.colorHelper = function() {  
 //FIX
			var  colors_ =[
				{color : '#33CCFF', picurl : "url('"+ctx+"/jsf/resources/images/3.png')"},
				{color : '#3399FF', picurl : "url('"+ctx+"/jsf/resources/images/4.png')"},
				{color : '#0066FF', picurl : "url('"+ctx+"/jsf/resources/images/5.png')"},
				{color : '#003399', picurl : "url('"+ctx+"/jsf/resources/images/6.png')"},
				{color : '#003399', picurl : "url('"+ctx+"/jsf/resources/images/7.png')"}		
			];

			this.get = function (){
				var color_ = colors_.shift();
				colors_.push(color_);
				return color_;
			}
	  };  

	  
	  $.fn.processbar.defaults = {  
	    textInside: false,  
	    background: 'yellow',
		animate:false,
		container_margin:5,
		section_minWidth:10
	  };  
	})(jQuery);   
